<template>
  <view class="gc-message" :class="{'gc-message--show':isOpen}" @touchmove.stop.prevent="bindTouchmove">
    <view class="gc-message__mask" @click="clickMask"></view>
    <view class="gc-message__container">
      <view v-if="title.length > 0" class="gc-message__header">{{ title }}</view>
      <view class="gc-message__content" :class="content ? 'gc-message--padding' : ''" :style="{textAlign:align}">
        <template v-if="content">
          <rich-text v-if="type === 'richText'" :nodes="content"></rich-text>
          <text v-else class="message-content">{{ content }}</text>
        </template>
        <template v-else>
          <slot />
        </template>
      </view>
      <view class="gc-message__footer">
        <view
          class="gc-message__footer-right"
          :class="{'single': !showCancel}"
          :style="{color:confirmColor, background: confirmBackground, border: `2rpx solid ${confirmBackground}`}"
          hover-class="gc-message__footer-hover"
          :hover-start-time="20"
          :hover-stay-time="70"
          @click="clickRight">
          {{ confirmText }}
        </view>
        <view
          v-if="showCancel"
          class="gc-message__footer-left"
          :style="{color:cancelColor}"
          hover-class="gc-message__footer-hover"
          :hover-start-time="20"
          :hover-stay-time="70"
          @click="clickLeft">
          {{ cancelText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const $this = []
export default {
  name: 'GlobalMessage',
  props: {
    // title: { // 标题
    //   type: String,
    //   default: ''
    // },
    // content: { // 提示的内容
    //   type: String,
    //   default: ''
    // },
    // align: { // content 的对齐方式left/center/right
    //   type: String,
    //   default: 'left'
    // },
    // cancelText: { // 取消按钮的文字，默认为"取消"
    //   type: String,
    //   default: '取消'
    // },
    // cancelColor: { // 取消按钮颜色
    //   type: String,
    //   default: '#333333'
    // },
    // confirmText: { // 确定按钮的文字，默认为"确定"
    //   type: String,
    //   default: '确定'
    // },
    // confirmColor: { // 确认按钮颜色
    //   type: String,
    //   default: '#007aff'
    // },
    // showCancel: { // 是否显示取消按钮，默认为 true
    //   type: [Boolean, String],
    //   default: true
    // },
    // showMessage: { // 是否显示模态框
    //   type: [Boolean, String],
    //   default: false
    // },
    // autoClose: { // 点击遮罩是否自动关闭弹窗
    //   type: [Boolean, String],
    //   default: true
    // }
  },
  data() {
    return {
      isOpen: false,
      title: '', // 标题,
      type: 'text', // text: 文字, richText自定义
      content: '', // 提示的内容,
      align: '', // content 的对齐方式left/center/right,
      cancelText: '取消', // 取消按钮的文字，默认为"取消",
      cancelColor: '#999', // 取消按钮颜色,
      confirmText: '确定', // 确定按钮的文字，默认为"确定",
      confirmColor: '#fff', // 确认按钮颜色,
      confirmBackground: '#000', // 确认按钮背景色
      showCancel: true, // 是否显示取消按钮，默认为 true,
      showMessage: false, // 是否显示模态框,
      autoClose: '', // 点击遮罩是否自动关闭弹窗,
      confirm: () => {},
      cancel: () => {}
    }
  },
  created() {
    $this.push(this)
  },
  destroyed() {
    $this.pop()
  },
  methods: {
    show(data) {
      const _this = $this[$this.length - 1]
      _this.isOpen = true
      Object.keys(data).forEach(key => {
        _this[key] = data[key]
      })
    },
    bindTouchmove() {},
    clickLeft() {
      setTimeout(() => {
        this.cancel()
        this.$emit('cancel')
      }, 200)
      this.closeModal()
    },
    clickRight() {
      setTimeout(() => {
        this.confirm()
        this.$emit('confirm')
      }, 200)
      this.closeModal()
    },
    clickMask() {
      if (this.autoClose) {
        this.closeModal()
      }
    },
    closeModal() {
      this.showAnimation = false
      this.isOpen = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
  $bg-color-mask:rgba(0, 0, 0, 0.5); //遮罩颜色
  $bg-color-hover:#f1f1f1; //点击状态颜色
  .single{
    margin: 32rpx;
    line-height: 88rpx !important;
    height: 88rpx !important;
  }
  .gc-message {
    position: fixed;
    visibility: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition:visibility 200ms ease-in;
    &.gc-message--show{
      visibility: visible;
    }
    &__header {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 48rpx 24rpx 32rpx;
      line-height: 1.5;
      color: #000;
      font-weight: bold;
      font-size: 34rpx;
      text-align: center;

      &::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        // border-top: 1px solid #e5e5e5;
        transform-origin: 0 0;
        transform: scaleY(.5);
      }
    }

    &__container {
      position: absolute;
      z-index: 999;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) ;
      transition: transform 0.3s;
      width: 606rpx;
      background-color: #fff;
      overflow: hidden;
      opacity: 0;
      transition: opacity 200ms ease-in;
    }

    &__content {
      position: relative;
      color: #000;
      font-size: 28rpx;
      box-sizing: border-box;
      line-height: 1.5;

      &::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: -1px;
        right: 0;
        height: 1px;
        // border-bottom: 1px solid #e5e5e5;
        transform-origin: 0 0;
        transform: scaleY(.5);
      }
    }

    &__footer {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #666;
      font-size: 32rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &-left,
      &-right {
        border: 2rpx solid #ccc;
        margin-bottom: 32rpx;
        position: relative;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 80rpx;
        width: 450rpx;
        font-size: 32rpx;
        line-height: 80rpx;
        text-align: center;
        background-color: #fff;
        color: #000;
      }
      &-right {
        font-weight: blod;
      }
      &-left::after {
        content: " ";
        position: absolute;
        right: -1px;
        top: 0;
        width: 1px;
        bottom: 0;
        // border-right: 1px solid #e5e5e5;
        transform-origin: 0 0;
        transform: scaleX(.5);
      }

      &-hover {
        background-color: $bg-color-hover;
      }
    }

    &__mask {
      display: block;
      position: absolute;
      z-index: 998;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: $bg-color-mask;
      opacity: 0;
      transition: opacity 200ms ease-in;
      &.gc-message--show{
        opacity: 1;
      }
    }
    &--padding {
        padding: 0rpx 24rpx 20rpx;
        min-height: 90rpx;
    }
    &--show {
      .gc-message__container,.gc-message__mask{
        opacity: 1;
      }
    }
  }
</style>
